<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <link rel="stylesheet" href="https://ajax.aspnetcdn.com/ajax/jquery.mobile/1.2.0/jquery.mobile-1.2.0.min.css"/>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script src="https://ajax.aspnetcdn.com/ajax/jquery.mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
    <script src="http://documentcloud.github.com/underscore/underscore-min.js"></script>
    <script src="http://documentcloud.github.com/backbone/backbone-min.js"></script>
    <script src="https://raw.github.com/jeromegn/Backbone.localStorage/master/backbone.localStorage-min.js"></script>

    <script type="text/javascript">
        /*BASE MODEL*/
        var AppModel = {};

        AppModel.Contacts = Backbone.Collection.extend({
            model:BaseModel.extend({
                localStorage:new Backbone.LocalStorage("contact"),
                defaults:function () {
                    return {
                        markDeleted:false,
                        readonly:false,
                        cdContact:"",
                        dsContact:"",
                        priority:""
                    };
                }
            })
        });

        AppModel.SpokenTongues = Backbone.Collection.extend({
            model:BaseModel.extend({
                localStorage:new Backbone.LocalStorage("spokenTongue"),
                defaults:function () {
                    return {
                        markDeleted:false,
                        readonly:false,
                        cdTongue:"",
                        priority:""
                    };
                }
            })
        });

        AppModel.User = Backbone.Model.extend({

            localStorage:new Backbone.LocalStorage("user"),

            defaults:function () {
                return {
                    markDeleted:false,
                    readonly:false,
                    openid:"",
                    username:"",
                    gender:"",
                    birthYear:"",
                    photo:""
                };
            }
        });

        var UserController = {
            user:new AppModel.User(),
            contacts:new AppModel.Contacts(),
            spokenTongues:new AppModel.SpokenTongues()
        };

        UserController.userData_w = Backbone.View.extend({
            events:{
                "click #save":'save_form',
                "click #clear":'clear_form',
                'change input':'inputChange'
            },
            template:"",
            initialize:function () {
                this.bind('clear', this.render, this);
            },
            render:function () {
                this.template = _.template($('#userData-content-template').html(), UserController.user.attributes);
                this.$el.html(this.template);
                this.$el.trigger('create');
            },
            inputChange:function (evt) {
                var target = $(evt.currentTarget);
                UserController.user.set(target.attr('name'), target.val());
            },
            save_form:function (event) {
                console.log('saving');
                UserController.user.save();
            },
            clear_form:function (event) {
                console.log('clearing');
                UserController.user.destroy();
                UserController.user.set(UserController.user.defaults());
                this.trigger('clear');
            }
        });

        /*BIND EVENTS*/
        $('#profile-page').live('pageinit', function (event) {
            console.log('page init event');

            var userContainer = $('#profile-page').find(":jqmData(role='content')");
            var userListView = new UserController.userData_w({'el':userContainer});
            userListView.render();
        });

    </script>

</head>
<body>
<!-- Home -->
<div data-role="page" data-theme="a" id="profile-page">
    <div data-role="content">
    </div>
</div>

<script type="text/x-underscore-template" id="userData-content-template">
    <div data-role="fieldcontain">
        <fieldset data-role="controlgroup">
            <input name="username" id="Username" placeholder="Username" value="<%= username %>" type="text"/>
        </fieldset>
    </div>
    <div data-role="fieldcontain">
        <fieldset data-role="controlgroup">
            <input name="birthYear" id="birthYear" placeholder="Year of birth" value="<%= birthYear %>" type="text"/>
        </fieldset>
    </div>
    <div data-role="fieldcontain">
        <fieldset data-role="controlgroup">
            <input name="gender" id="Gender" placeholder="Gender" value="<%= gender %>" type="text"/>
        </fieldset>
    </div>
    <a id="save" data-role="button" data-inline="true" href="#">
        Save
    </a>
    <a id="clear" data-role="button" data-inline="true" href="#">
        Clear
    </a>
</script>
</body>
</html>